<template>
    <view class="class-list-wrapper">
        <view class="class-item" :class="{'active': activeId === item.id}" v-for="item in sortDataList" :key="item.id" @tap="selectClassHandle(item)">
            <text style="position: relative">
                <text v-if="activeId === item.id" class="active-line"></text>
                {{item.label}}
            </text>
        </view>
        <view style="height: 160rpx;"/>
    </view>
</template>

<script>
    import service from "@/service";
    export default {
        name: "selectClass",
        props: {
            classId:{
                default: 'author',
                type: [String, Number]
            }
        },
        data() {
            return {
                classList: [
                    {
                        apiName: 'authors',
                        label: '名家大师',
                        id: 'author',
                        type: 1
                    },
                    {
                        apiName: 'awards',
                        label: '大奖作品',
                        id: 'award',
                        type: 1
                    },
                    {
                        apiName: 'roless',
                        label: '图画角色',
                        id: 'roles',
                        type: 5
                    },
                    {
                        apiName: '5',
                        label: '分龄阅读',
                        id: 'age',
                        type: 2
                    },
                    {
                        apiName: 'themes',
                        label: '主题系列',
                        id: 'theme',
                        type: 5
                    }
                ],
                sortList: [],
                sortDataList: [],
                activeId: ''
            }
        },
        watch: {
            classId(){
                this.activeId = this.classId || this.classList[0].id;
            }
        },
        mounted(){
            this.activeId = this.classId || this.classList[0].id;
            this.$emit('selectClass', this.classList[0]);
            this.$store.commit('className', this.classList[0].label)
        },
        onShow(){
        },
        methods: {
            selectClassHandle(item) {
                this.activeId = item.id;
                this.$store.commit('className', item.label)
                this.$emit('selectClass', item);
            },
            showSort () {
                uni.showLoading({
                    title: '加载中',
                });
                service.mineService.showSort({
                    data: {},
                    success: res => {
                        uni.hideLoading();
                        if (res.code === 200) {
                            this.sortList = res.result || [];
                            this.sortList = this.sortList.map(val => {
                                return {
                                    apiName: val.sortId,
                                    label: val.sortName,
                                    type: 4,
                                    id: val.sortId
                                }
                            })
                            this.sortDataList = this.classList.concat(this.sortList)
                        } else {
                            uni.showToast({
                                title: `${res.resultMsg}`,
                                duration: 2500,
                                icon: 'none'
                            });
                        }
                    },
                    fail: ()=>{
                        uni.hideLoading();
                    },
                    complete: () => {

                    },
                });
            }
        }
    }
</script>

<style scoped lang="scss">
    .class-list-wrapper {
        height: 100%;
        background:rgba(249,249,249,1);
        flex: 0 0 176rpx;
        position: fixed;
        left: 0;
        top: 110rpx;
        bottom: 0;
        width: 176rpx;
        overflow-y: auto;
        .class-item {
            width: 176rpx;
            height: auto;
            padding: 25rpx 10rpx 25rpx 20rpx;
            display: flex;
            align-items: center;
            /*line-height: 110rpx;*/
            text-align: center;
            box-sizing: border-box;
            line-height: 40rpx;
            font-size:28rpx;
            color:rgba(153,153,153,1);
            border-bottom:1rpx solid rgba(229,229,229,1);
            &.active{
                background: #fff;
                color: #333333;
            }
            .active-line {
                display: inline-block;
                width: 4rpx;
                position: absolute;
                top: 6rpx;
                background: #3773EB;
                bottom: 6rpx;
                left: -8rpx;
            }
        }
    }
</style>